<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人中心</title>
<!--    <link rel="stylesheet" type="text/css" href="css/index1.css" />-->

    <!-- css样式文件 -->
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            overflow: hidden;
        }

        #allmap {
            height: 400px;
            width: 100%;
            overflow: hidden;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
            position: absolute;
        }
    </style>
</head>
<body class="index">
<div class="uc_title m_10 tabs_menu">
    <label class="current node"><span>添加地址</span></label>
</div>
<div class="ucenter container">
</div>
<div class="searchbar">
</div>
<div class="wrapper clearfix">
    <div class="main f_r" id="main">

        <!-- 地图盒子 -->
        <div id="allmap"></div>
        <!-- 搜索显示框 -->
        <div id="r-result">
            地址: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
            <input type="button" value="搜索" onclick="theLocation()" /> 经度:
            <input type="text" id="lng" /> 纬度：
            <input type="text" id="lat" />
<!--            <button onclick="submit()">提交</button>-->
        </div>
    </div>
</div>


<!-- 页面地图js方法 -->
<script type="text/javascript">
    // 在指定容器创建地图实例并设置最大最小缩放级别
    var map = new BMap.Map("allmap", {
        minZoom: 5,
        maxZoom: 18
    });

    // 初始化地图，设置中心点和显示级别
    // map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);
    //定位成功事件
    //var myKeys=[];
    var myKeys='';
    var lng='';         //精度
    var lat='';         //纬度
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(108.95,34.27);
    map.centerAndZoom(point,18);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){console.log(r.point)
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);//标出所在地
            map.panTo(r.point);//地图中心移动
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
            lng=r.point.lng;
            lat=r.point.lat;
            var point = new BMap.Point(r.point.lng,r.point.lat);    //用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                //myKeys = [rs.address];     当有其他信息时，可以定义成数组
                myKeys = rs.address;
                //alert(myKeys);         //弹出所在地址
                local.searchInBounds(myKeys, map.getBounds());
            });
        }
    },{enableHighAccuracy: true})


    // 开启鼠标滚轮缩放功能，仅对PC上有效
    map.enableScrollWheelZoom(true);

    // 将控件（平移缩放控件）添加到地图上
    map.addControl(new BMap.NavigationControl());



    var geoc = new BMap.Geocoder();
    // 为地图增加点击事件，为input赋值
    map.addEventListener("click", function(e) {
        document.getElementById('lat').value = e.point.lat;
        document.getElementById('lng').value = e.point.lng;

        var pt = e.point;
        //第一个参数为要逆解析的坐标点；第二个参数为回调函数
        geoc.getLocation(pt, function(rs){//回调函数中的参数rs是一个GeocoderResult对象

            //GeocoderResult对象的addressComponents属性返回了一个结构化的地址描述
            var addComp = rs.addressComponents;
            console.log(addComp.province + addComp.city +  addComp.district +  addComp.street +  addComp.streetNumber);
            document.getElementById('cityName').value = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
        });

    });

    // 创建位置检索、周边检索和范围检索
    var local = new BMap.LocalSearch(map, {
        renderOptions: {
            map: map
        }
    });

    // 发起检索
    function theLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            local.search(city);
        }
    };

    var vid=0;
    // 弹出经纬度
    function submit() {
        $.ajax({
            type:"get",
            async:false,//不然没法给vid赋值就被下面执行了
            url :"/venue/session",
            success : function(result) {
                console.info(result)
                if(result.code===200){
                    console.info(result.data)
                    vid = result.data.vid;
                }else{
                    alert("查询失败");
                }
            }
        });
        var lat = document.getElementById('lat');
        var lng = document.getElementById('lng');
        var cityName=document.getElementById('cityName');
        alert("经度：" + lng.value + "\n" + "纬度：" + lat.value + "\n" + "地址："+cityName.value);
        console.info("vid:"+vid)
        var ljson={"vid":vid,"address":cityName.value, "longitude":lng.value, "latitude":lat.value};
        $.ajax({
            type:"put",
            url :"/venue/address",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify(ljson),
            success : function(result) {
                console.info(result)
                if(result.code===200){
                    $("#addressInfo").text(cityName.value);
                    alert("添加成功");
                }else{
                    alert("添加失败");
                }
            }
        });

    };
</script>
</body>
</html>
